<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname">
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname:'zs',
      dog:{
        name:'旺财',
        age:4
      }
    }
  },
  //侦听器，要写到和data平级的watch中
  watch: {
    //----------1.函数写法
    // uname(newVal,oldVal) {
    //   console.log(newVal,oldVal)
    // }


    //----------2.对象写法  （写成对象，就是为了加immediate或deep选项）
    uname:{
      handler(newVal,oldVal) {
        //写对象格式，handler必须写，名字固定
        console.log(newVal,oldVal)
      },
      immediate:true //表示页面刷新后，马上监听
    },
    // dog: {
    //   handler(newVal) {
    //     console.log(newVal)
    //   },
    //   deep:true // 表示深度侦听，当对象的任意属性改变后，都会触发该侦听器
    // }

    //-----------3.只侦听某一个属性
    'dog.age'(newVal) {
      console.log(newVal)
    }
  }
}
</script>

<style>

</style>